<template>
    <div class="home viewer">
        <vc-viewer ref="viewerRef" :info-box="false" :show-credit="false" :selectionIndicator="false"
            :scene3DOnly="true" @ready="onViewerReady">
            <vc-layer-imagery>
                <!-- 百度地图-午夜蓝 -->
                <!-- <vc-imagery-provider-baidu mapStyle="midnight" :projection-transforms="{ from: 'BD09', to: 'WGS84' }">
        </vc-imagery-provider-baidu> -->
                <vc-imagery-provider-tencent mapStyle="vector" styleId="4"
                    :projection-transforms="{ from: 'GCJ02', to: 'WGS84' }"
                    ref="provider"></vc-imagery-provider-tencent>
            </vc-layer-imagery>
            <!-- 行政区 -->
            <geo-json />
        </vc-viewer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VcReadyObject } from 'vue-cesium/es/utils/types'
import GeoJson from '@/components/GeoJson/index.vue';

let viewer = ref(null)

const onViewerReady = (readyObj: VcReadyObject) => {
    viewer.value = readyObj.viewer
}

</script>

<style scoped>
.viewer {
    height: 100vh;
    width: 100%;
}
</style>
